import React, { Component } from 'react'
import empty from "../../assets/images/empty.jpg"
import { NavBar, Icon } from "antd-mobile";
import './Cart.scss'
export default class Cart extends Component {
    state = {
        carts: []
    }
    componentDidMount() {
        let carts_str = localStorage.getItem('carts')
        let carts = JSON.parse(carts_str || '[]');
        this.setState({
            carts: carts,
            num:1
        })

    }
    render() {
        return (
            <div className='yg-cart'>
                {
                    !!this.state.carts.length ?

                        <div className='yg-cart-content'>
                            <div className='yg-nav-bar'>
                                <NavBar
                                    className="nav-bar"
                                    icon={<Icon type="left" />}
                                    onLeftClick={() => window.history.go(-1)}
                                >
                                    商品列表
                                </NavBar>
                            </div>
                            <div className='yg-cart-list'>
                                {
                                    this.state.carts.map((v) => {
                                        return (
                                            <div className='yg-cart-item' key={v.goods_id}>
                                                <div className='item-left'>
                                                    <i className='iconfont icon-gouxuan'></i>
                                                </div>
                                                <div className='item-midlle'>
                                                    <img src={v.goods_small_logo} alt=""/>
                                                </div>
                                                <div className='item-right'>
                                                    <div className='shangping-title'>
                                                        {v.goods_name}
                                                    </div>
                                                    <div className='shangping-cangshu'>
                                                        <div className='shangping-price'>
                                                            <span>￥</span>
                                                            <span>{v.goods_price}</span>
                                                        </div>
                                                        <div className='shangping-shuliang'>
                                                            <i className='iconfont icon-jian'></i>
                                                            <span>{this.state.num}</span>
                                                            <i className='iconfont icon-icon-1'></i>

                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        )
                                    })
                                }
                            </div>
                            <div className='yg-cart-bottom'>
                                <div className='cart-checked'>
                                    <i className='iconfont icon-gouxuan'></i>
                                    <span>全选</span>
                                </div>
                                <div className='cart-price'>
                                    <p>合计:</p>
                                    <span>￥</span>
                                    <span>3199</span>
                                </div>
                                <div className='cart-button'>
                                    <div className='cart-button-shuju'>
                                        <span>去结算</span>
                                        <span>{this.state.num}</span>
                                    </div>
                                </div>
                            </div>
                        </div> :
                        <div className='yg-cart-emty'>
                            <img src={empty} alt="" />

                            <h3 className="empty_text"><a href="#/category">去逛逛</a></h3>


                        </div>
                }
            </div>
        )
    }
}
